<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" >
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      v-model.trim="enter"
      @keyup.enter="addEnter"
      autofocus
    />
  </header>
</template>

<script>
export default {
 props:{
  list: {
    type:Array,
    required:true
  }
 },
 computed:{
  isAll:{
    get() {
      // 遍历完数组后,每一项都符合条件,则返回true
      return this.list.every(item=>item.isDone)
    },
    set(val) {
      this.$emit('checkAll',val)
    }
  }
 },
 data() {
  return {
    enter:""
  }
 },
methods: {
  addEnter() {
    this.$emit("addEnter",this.enter)
    this.enter = ''
  }
} 
}
</script>